<template>
  <div class="layout">
    <!-- 顶部信息栏 -->
    <div class="top-bar">
      <div class="container">
        <div class="contact-info">
          <span><i class="fas fa-phone"></i> 400-888-8888</span>
          <span><i class="fas fa-envelope"></i> service@headphone.com</span>
        </div>
        <div class="user-actions">
          <template v-if="!$store.state.user">
            <router-link to="/login">登录</router-link>
            <span class="divider">|</span>
            <router-link to="/register">注册</router-link>
          </template>
          <template v-else>
            <span>欢迎，{{ $store.state.user.username }}</span>
            <span class="divider">|</span>
            <a @click="logout">退出</a>
          </template>
        </div>
      </div>
    </div>

    <!-- 主导航栏 -->
    <header class="header">
      <div class="container">
        <div class="logo">
          <img src="@/assets/headphone-logo.png" alt="耳机商城logo" />
          <h1>音悦耳机</h1>
        </div>
        <div class="search-box">
          <input type="text" placeholder="搜索耳机、配件" v-model="searchTerm" @keyup.enter="performSearch" />
          <button @click="performSearch"><i class="fas fa-search"></i></button>
        </div>
        <div class="header-actions">
          <router-link to="/cart" class="cart-link">
            <i class="fas fa-shopping-cart"></i>
            <span class="cart-count" v-if="$store.getters.cartCount">
              {{ $store.getters.cartCount }}
            </span>
          </router-link>
          <router-link to="/user" class="user-center">
            <i class="fas fa-user"></i>
            <span>个人中心</span>
          </router-link>
        </div>
      </div>
    </header>

    <!-- 分类导航 -->
    <nav class="main-nav">
      <div class="container">
        <div class="category-menu">
          <div class="all-categories">
            <i class="fas fa-bars"></i>
            全部商品分类
          </div>
          <ul class="nav-links">
            <li>
              <router-link to="/" :class="{ active: $route.path === '/' }">
                首页
              </router-link>
            </li>
            <li>
              <router-link to="/products?category=降噪耳机" :class="{ active: $route.path === '/products' && $route.query.category === '降噪耳机' }">
                降噪耳机
              </router-link>
            </li>
            <li>
              <router-link to="/products?category=HiFi耳机" :class="{ active: $route.path === '/products' && $route.query.category === 'HiFi耳机' }">
                HiFi耳机
              </router-link>
            </li>
            <li>
              <router-link to="/products?category=蓝牙耳机" :class="{ active: $route.path === '/products' && $route.query.category === '蓝牙耳机' }">
                蓝牙耳机
              </router-link>
            </li>
            <li>
              <router-link to="/products?category=真无线耳机" :class="{ active: $route.path === '/products' && $route.query.category === '真无线耳机' }">
                真无线耳机
              </router-link>
            </li>
            <li>
              <router-link to="/about" :class="{ active: $route.path === '/about' }">
                关于我们
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- 主体内容插槽 -->
    <slot></slot>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="container">
        <div class="footer-content">
          <div class="footer-section">
            <h3>关于我们</h3>
            <ul>
              <li><a href="#">公司简介</a></li>
              <li><a href="#">联系我们</a></li>
              <li><a href="#">招贤纳士</a></li>
              <li><a href="#">企业文化</a></li>
            </ul>
          </div>
          <div class="footer-section">
            <h3>购物指南</h3>
            <ul>
              <li><a href="#">购物流程</a></li>
              <li><a href="#">支付方式</a></li>
              <li><a href="#">配送说明</a></li>
              <li><a href="#">常见问题</a></li>
            </ul>
          </div>
          <div class="footer-section">
            <h3>售后服务</h3>
            <ul>
              <li><a href="#">退换货策</a></li>
              <li><a href="#">退换货流程</a></li>
              <li><a href="#">投诉建议</a></li>
              <li><a href="#">服务承诺</a></li>
            </ul>
          </div>
          <div class="footer-section contact">
            <h3>联系我们</h3>
            <p><i class="fas fa-phone"></i> 400-888-8888</p>
            <p><i class="fas fa-envelope"></i> service@headphone.com</p>
            <p>
              <i class="fas fa-map-marker-alt"></i>
              广东省广州市天河区珠江新城音悦大厦8楼
            </p>
            <div class="social-media">
              <a href="#"><i class="fab fa-weixin"></i></a>
              <a href="#"><i class="fab fa-weibo"></i></a>
              <a href="#"><i class="fab fa-qq"></i></a>
            </div>
          </div>
        </div>
        <div class="footer-bottom">
          <p>© 2024 音悦耳机 版权所有 | 粤ICP备88888888号</p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: "MainLayout",
  data() {
    return {
      searchTerm: ''
    };
  },
  methods: {
    logout() {
      this.$store.commit("setUser", null);
    },
    performSearch() {
      // Navigate to the products page with the search term as a query parameter
      this.$router.push({ path: '/products', query: { search: this.searchTerm } });
    }
  },
};
</script>

<style scoped>
.layout {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.top-bar {
  background: linear-gradient(to right, #2c3e50, #34495e); /* Darker, more sophisticated gradient */
  padding: 8px 0;
  font-size: 14px;
  color: #fff;
}

.top-bar .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contact-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.contact-info span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.contact-info i {
  color: #fff; /* White icon on blue background */
}

.user-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-actions a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
  cursor: pointer;
}

.user-actions a:hover {
  color: #ecf0f1; /* Lighter color on hover */
}

.user-actions .divider {
  color: rgba(255, 255, 255, 0.3);
}

.header {
  background: white;
  padding: 25px 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Lighter shadow */
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 200px;
}

.logo img {
  height: 40px;
  transition: transform 0.3s;
}

.logo:hover img {
  transform: scale(1.05);
}

.logo h1 {
  font-size: 22px;
  color: #2c3e50; /* Dark blue-gray */
  font-weight: bold;
}

.search-box {
  flex: 1;
  max-width: 500px;
  margin: 0 20px;
  display: flex;
}

.search-box input {
  flex: 1;
  height: 40px;
  padding: 0 20px;
  border: 2px solid #34495e; /* Darker blue border */
  border-right: none;
  border-radius: 20px 0 0 20px;
  outline: none;
  font-size: 14px;
  transition: all 0.3s;
}

.search-box input:focus {
  border-color: #2c3e50; /* Darker blue on focus */
  box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1); /* Subtle shadow */
}

.search-box button {
  width: 60px;
  background: #34495e; /* Darker blue background */
  border: none;
  color: white;
  border-radius: 0 20px 20px 0;
  cursor: pointer;
  transition: all 0.3s;
}

.search-box button:hover {
  background: #2c3e50; /* Even darker blue on hover */
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  min-width: 200px;
  justify-content: flex-end;
}

.cart-link,
.user-center {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666; /* Keep original gray for general links */
  text-decoration: none;
  transition: all 0.3s;
  padding: 8px 12px;
  border-radius: 20px;
}

.cart-link:hover,
.user-center:hover {
  color: #34495e; /* Darker blue on hover */
  background: rgba(44, 62, 80, 0.05); /* Very light blue background on hover */
}

.cart-link {
  position: relative;
}

.cart-count {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #e74c3c; /* Red for cart count */
  color: white;
  font-size: 12px;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  padding: 0 5px;
}

.main-nav {
  background: #34495e; /* Darker blue background */
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.category-menu {
  display: flex;
  align-items: stretch;
  height: 50px;
}

.all-categories {
  background: #2c3e50; /* Even darker blue */
  padding: 0 25px;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  transition: background 0.3s ease;
  position: relative;
}

.all-categories:hover {
  background: #1a252f; /* Darkest blue on hover */
}

.all-categories::after {
  content: "";
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 10px solid #4a8ac2; /* Darker blue border */
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

.nav-links li {
  height: 100%;
}

.nav-links li a {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 500;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nav-links li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 3px;
  background: white;
  transition: width 0.3s ease;
}

.nav-links li a:hover {
  background: rgba(255, 255, 255, 0.1);
}

.nav-links li a:hover::after {
  width: 80%;
}

.nav-links li a.active {
  background: rgba(255, 255, 255, 0.2);
}

.nav-links li a.active::after {
  width: 80%;
  background: #fff;
}

.footer {
  background: linear-gradient(135deg, #1a1a2e, #16213e); /* Dark navy gradient */
  color: #e0e0e0;
  padding: 60px 0 20px;
  margin-top: auto;
  border-top: 5px solid #e74c3c;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}

.footer-section h3 {
  color: #ffffff;
  margin-bottom: 20px;
  font-size: 18px;
  position: relative;
  padding-bottom: 10px;
}

.footer-section h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: #e74c3c;
}

.footer-section ul {
  list-style: none;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 12px;
}

.footer-section a {
  color: #b8b8b8;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  position: relative;
}

.footer-section a:hover {
  color: #e74c3c;
  transform: translateX(5px);
}

.footer-section.contact p {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-section.contact p i {
  color: #e74c3c;
  font-size: 18px;
}

.social-media {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.social-media a {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  color: #e0e0e0;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.social-media a:hover {
  background: #e74c3c;
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
}

.footer-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  text-align: center;
  color: #b8b8b8;
  font-size: 14px;
}

@media (max-width: 1200px) {
  .container {
    padding: 0 20px;
  }
}

@media (max-width: 992px) {
  .header .container {
    flex-wrap: wrap;
  }

  .search-box {
    order: 3;
    margin: 15px 0 0;
    max-width: 100%;
  }

  .header-actions {
    min-width: auto;
  }
}

@media (max-width: 768px) {
  .contact-info span:last-child {
    display: none;
  }

  .logo h1 {
    display: none;
  }
}

@media (max-width: 576px) {
  .header-actions span {
    display: none;
  }

  .cart-link,
  .user-center {
    padding: 8px;
  }
}
</style> 